<template>
    <div class="menus-box">
        <div class="tabs">
            <el-tabs :tab-position="tabPosition" style="height: 200px;" @tab-click="tabClick">
                <el-tab-pane
                    :label="item.appName"
                    v-for="(item,index) in leftMenuList"
                    :key="item.id"
                ></el-tab-pane>
            </el-tabs>
        </div>
        <div class="mod-meun" v-if="appId=='lhzd'">
            <el-form :inline="true" :model="dataForm">
                <el-form-item>
                    <el-button size="mini" type="primary" @click="addOrUpdateHandle(null,1)">新增</el-button>
                </el-form-item>
            </el-form>
            <el-table
                row-key="id"
                border
                :data="dataList"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                element-loading-text="拼命加载中"
                v-loading="dataListLoading"
                style="width: 100%;"
            >
                <el-table-column label="菜单名称" width="150" prop="title"></el-table-column>
                <el-table-column
                    prop="url"
                    header-align="center"
                    align="center"
                    width="120"
                    label="菜单地址"
                ></el-table-column>
                <el-table-column prop="logo" header-align="center" align="center" label="菜单标识"></el-table-column>
                <el-table-column prop="type" header-align="center" align="center" label="类型">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.type === 1" size="small">菜单资源</el-tag>
                        <el-tag v-else size="small">页面资源</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    header-align="center"
                    align="center"
                    width="150"
                    :show-overflow-tooltip="true"
                    label="创建时间"
                ></el-table-column>
                <el-table-column
                    fixed="right"
                    header-align="center"
                    align="center"
                    width="330"
                    label="操作"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            size="mini"
                            @click="addOrUpdateHandle(scope.row,1)"
                        >新增</el-button>
                        <el-button
                            type="primary"
                            size="mini"
                            @click="addOrUpdateHandle(scope.row,2)"
                        >编辑</el-button>
                        <el-button type="danger" size="mini" @click="deleteHandle(scope.row.id)">删除</el-button>
                        <el-button type="primary" size="mini" @click="configBtn(scope.row)">配置按钮</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <add-or-update
                v-if="addOrUpdateVisible"
                ref="addOrUpdateDom"
                @refreshDataList="getList"
            ></add-or-update>
        </div>
        <div class="no-data" v-else>暂无数据</div>
    </div>
</template>
<script>
import addOrUpdate from './add-or-update';
import API from '@/api';
export default {
    components: {
        addOrUpdate
    },
    data() {
        return {
            tabPosition: 'left',
            dataForm: {},
            dataList: [],
            dataListLoading: false,
            addOrUpdateVisible: false,
            leftMenuList: [],
            appId: 'lhzd'
        };
    },
    mounted() {
        this.getLeftMenus();
        this.getList();
    },
    methods: {
        getLeftMenus() {
            var params = {
                pageNum: 1,
                pageSize: 1000
            };
            API.systemManger.systemList(params).then(res => {
                this.leftMenuList = res.data.rows;
                this.appId = res.data.rows[0].appId;
            });
        },
        configBtn(row) {
            this.$router.push({ path: '/menuBtn/index', query: { appId: row.appId, pageId: row.id,appType:'web' } });
        },

        tabClick(tab, event) {
            this.appId = this.leftMenuList[tab.index]['appId'];
        },
        // 获取列表数据
        getList() {
            this.dataListLoading = true;
            API.menu.getMenuList().then(res => {
                this.dataListLoading = false;
                this.dataList = res.data;
            });
        },
        // 新增或者编辑
        addOrUpdateHandle(items, type) {
            this.addOrUpdateVisible = true;
            this.$nextTick(() => {
                // 编辑
                if (type == 2) {
                    this.dataListLoading = true;
                    API.menu.lookMenuDetail({id:items.id}).then(res=>{
                        if (res.code == 20000000) {
                            this.dataListLoading = false
                           this.$refs.addOrUpdateDom.init(res.data, type, this.appId);
                        }
                    })
                } else {
                     this.$refs.addOrUpdateDom.init(null, type, this.appId);
                }
               
            });
        },
        //删除菜单
        deleteHandle(id) {
            this.$alert('您确定要删除该条数据吗?', '', {
                confirmButtonText: '确定',
                callback: action => {
                    API.menu.delMenu({ id: id }).then(res => {
                        if (res.httpCode == 200) {
                            this.$message({
                                type: 'success',
                                message: `删除成功`
                            });
                            this.getList();
                        }
                    });
                }
            });
        }
    }
};
</script>
<style scoped>
.menus-box {
    background: #fff;
    padding: 20px;
}
.menus-box .tabs {
    float: left;
    width: 15%;
}
.menus-box .mod-meun {
    float: right;
    width: 83%;
}
.no-data {
    text-align: center;
    color: #ccc;
    font-size: 14px;
    margin-top: 80px;
}
</style>